<template>
  <div class="orderDetail">
    
    <div class="status">
      <div class="text">交易成功</div>
      <img :src="statusImg" alt width="80px">
    </div>
    <hr/>
    <div class="addressWrap">
      <div class="address">
        <div class="location flex_c_c">
          <!-- <van-icon name="location-o"/> -->
          <van-icon name="free-postage" />
        </div>

        <div class="info">
          <div>{{orderInfo.address_info.name}} {{orderInfo.address_info.tel}}</div>
          <div>{{orderInfo.address_info.province}}{{orderInfo.address_info.city}}{{orderInfo.address_info.country}}{{orderInfo.address_info.addressDetail}}</div>
        </div>
        <van-divider/>
      </div>
    </div>
  <hr/>
<div>
    <div class="anfudewu">
    &nbsp;&nbsp;安福得物电商 >
    </div>
  </div>

    <van-card
      v-for="goods in orderGoods"
      :key="goods.id"
      :price="goods.sell_price"
      :title="goods.title"
      :thumb="goods.thumb_path"
      @click="$router.push('/goodsdetail/'+goods.id)"
    ></van-card>

  

    <!-- 订单一些基本信息 -->
    <div class="orderInfo">
      <div class="item">
        <span>商品总价</span>
        <span>&yen; {{orderInfo.total_price}}</span>
      </div>
      <div class="item">
        <span>实付款</span>
        <span>&yen; {{orderInfo.actual_price}}</span>
      </div>
      <div class="item">
        <span>付款方式</span>
        <span>{{orderInfo.pay_way}}</span>
      </div>
      <div class="item">
        <span>运费险</span>
        <span>&yen; 0.00</span>
      </div>
      <div class="item">
        <span>订单号</span>
        <span>{{orderInfo.order_id}}</span>
        <span class="copy" v-clipboard:copy="orderInfo.order_id" v-clipboard:success="onCopy">复制</span>
      </div>
    </div>

    <!-- 订单一些操作按钮 -->
    <div class="btns">
      <van-button v-if="orderInfo.status == 0" size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)">立即付款</van-button>
      <van-button
        v-if="orderInfo.is_out == 1 && orderInfo.status == 1 && orderInfo.is_take == 0"
        size="mini"
        type="primary"
        @click="showWuliu"
      >物流信息</van-button>

      <van-button
        v-if="orderInfo.status == 1 && orderInfo.is_out == 0"
        size="mini"
        type="danger"
      >提醒发货</van-button>
      <template v-if="orderInfo.is_take == 1 && orderInfo.is_out == 1 && orderInfo.status == 2">
        <van-button size="mini" type="info">已完成</van-button>
        <van-button size="mini" type="warning">去评价</van-button>
      </template>
    </div>

    <!-- 查看物流遮盖层 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
      <div class="addressWrap">
        <div class="address">
          <div class="location flex_c_c">
            <van-icon name="location-o"/>
          </div>

          <div class="info">
            <div>{{orderInfo.address_info.name}} {{orderInfo.address_info.tel}}</div>
            <div>{{orderInfo.address_info.province}}{{orderInfo.address_info.city}}{{orderInfo.address_info.country}}{{orderInfo.address_info.addressDetail}}</div>
          </div>
          <van-divider/>
        </div>
      </div>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="(item,index) in wuliuData" :key="index">
          <h3>{{item.location}}</h3>
          <p>{{item.time}}</p>
        </van-step>
      </van-steps>
    </van-popup>
  </div>
</template>

<script>
import { fetchOrderInfo, fetchlogistics } from "@/api/order";
import { fetchCartGoods } from "@/api/index.js";
export default {
  props: ["order_id"],
  data() {
    return {
      show: false,
      orderInfo: {},
      orderGoods: [],
      statusImg: require("@/img/images/198.png"),
      wuliuData: []
    };
  },
  created() {
    this._fetchOrderInfo();
  },
  methods: {
    async _fetchOrderInfo() {
      this.orderInfo = await fetchOrderInfo(this.order_id);
      this.orderInfo.address_info = JSON.parse(this.orderInfo.address_info);
      //   查询订单关联的商品信息
      let { message } = await fetchCartGoods(this.orderInfo.goods_ids);
      this.orderGoods = message;
    },
    onCopy(e) {
      event.stopPropagation(); // 阻止事件冒泡
      this.$toast("订单号复制成功");
    },
    async showWuliu() {
      // 查看当前订单物流信息
      this.wuliuData = await fetchlogistics();
      this.show = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.orderDetail{
  .status {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    background-color: #fff;
    color: black; 
  }
   
  .addressWrap {
    .address {
      display: flex;
      align-items: center;
      padding: 10px 10px;
      background-color: #fff;
      border-radius: 6px;
      margin: 6px 0;
      
      .van-icon {
        margin-right: 20px;
        font-size: 34px;
      }
    }
  }

  .orderInfo {
    padding: 2px 10px;
    .item {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #787373;
      margin: 5px 0;

      .copy {
        color: orangered;
      }
    }
  }

  .btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 60px;
    padding: 0 10px;
    box-shadow: 0 0 10px #ccc;
  }
}
</style>
